<template>
    <div>
        <div id="example">
            <p>Original message: "{{ message }}"</p>
            <p>Computed reversed message: "{{ reversedMessage }}"</p>
        </div>
        <div id="example2">
            <p>Reversed message: "{{reversedMessageWithMethod()}}"</p>
        </div>
        <div id="watch-example">
            <p>
                Ask a yes/no question:
                <input v-model="question">
            </p>
            <p>{{ answer }}</p>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'

@Component({})
export default class ComputedExample extends Vue {
    name = 'ComputedExample';
    message = "Hello World";
    get reversedMessage(){
        return this.message.split("").reverse().join("");
    }
    reversedMessageWithMethod():string{
        return this.reversedMessage.split(' ').reverse().join(' ');
    }
    answer = "I cannot give you an answer until you ask a question!";
    question = "";

    @Watch("question",{immediate:true,deep:true})
    onQuestionChanged(newQuestion:any,oldQuestion:any){
        this.answer = "Waiting for you to stop typing...";
        this.$http.get("api/match-test",{
            method:"get",
            params:{
                queryString:newQuestion
            }
        }).then(({data}) =>{
            this.answer = data;
        })
    }
}
</script>

<style scoped>

</style>
